<template>
  <div class="app-container session-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="会话ID" prop="hhid">
        <el-input v-model="state.queryParams.hhid" placeholder="会话ID" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>

      <!-- 按钮组件 -->
      <all-button :buttonType="['refresh', 'query']" @queryButton="handleQuery({initPageIndex: true})" @refreshButton="handleQuery({initPageIndex: true})" />

      <!-- <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery({initPageIndex: true})">搜索</el-button>
      </el-form-item> -->
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1" stripe border table-layout="fixed">
      <el-table-column align="center" prop="hhid" label="会话ID" min-width="120"></el-table-column>
      <el-table-column align="center" prop="hhaccount" label="关联账号id" min-width="100"></el-table-column>
      <el-table-column align="center" prop="hhqkid" label="关联潜客id" min-width="120"></el-table-column>
      <el-table-column align="center" prop="hhsendnum" label="会话发送数量" min-width="70"></el-table-column>
      <el-table-column align="center" prop="hhreadnum" label="会话接收数量" min-width="70"></el-table-column>
      <el-table-column align="center" prop="hhsendsize" label="会话发送字节数" min-width="70"></el-table-column>
      <el-table-column align="center" prop="hhreadsize" label="会话接收字节数" min-width="70"></el-table-column>
      <el-table-column align="center" prop="hhstartdate" label="会话开始时间" min-width="100"></el-table-column>
      <el-table-column align="center" prop="hhenddate" label="会话结束时间" min-width="100"></el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup name="Session">
import useSessionManageStore from '@store/modules/sessionManage'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'

const sessionManageStore = useSessionManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    hhid: ''
  }
})

/** 查询菜单列表 */
const getList = async (query) => {
  state.tableLoading = true
  const {Total, Data} = await sessionManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data

  state.tableLoading = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

onMounted(() => {
  handleQuery({initPageIndex: true})
})
</script>
